<template>
	<div>
		<van-nav-bar title="互帮互助" @click-right="createOfferButton">
			<template #right>
				<van-icon name="plus" size="18" />
			</template>
		</van-nav-bar>
		<van-tabs v-model:active="active" swipeable>
			<van-tab title="最新求助">
				<OfferList :openOfferUserPage="openOfferUserPage" offerType="last"></OfferList>
			</van-tab>
			<van-tab title="重金求助">
				<OfferList :openOfferUserPage="openOfferUserPage" offerType="costly"></OfferList>
			</van-tab>
		</van-tabs>
		<van-popup v-model:show="editNewOfferShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<EditNewOfferPage :close="closeNewOfferPage"></EditNewOfferPage>
		</van-popup>
		<van-popup v-model:show="offerUserPageShow" position="right" :style="{ width: '100%', height: '100%' }" closeable
			close-icon="arrow-left" close-icon-position="top-left">
			<UserHomePage :uid='offerUserId'></UserHomePage>
		</van-popup>
	</div>

</template>

<script>
	import {
		ref
	} from 'vue';
	import OfferList from './offer/OfferList.vue';
	import EditNewOfferPage from './EditNewOfferPage.vue';
	import UserHomePage from './UserHomePage.vue';
	
	export default {
		components: {
			OfferList,
			EditNewOfferPage,
			UserHomePage
		},
		setup() {
			const active = ref(0);
			return {
				active
			};
		},
		data(){
			return {
				editNewOfferShow:false,
				offerUserId: '',
				offerUserPageShow: false
			}
		},
		methods:{
			createOfferButton(){
				this.editNewOfferShow=true;
			},
			closeNewOfferPage(){
				this.editNewOfferShow=false;
			},
			openOfferUserPage(id){
				this.offerUserId=id;
				this.offerUserPageShow=true;
			},
		}
	}
</script>

<style>
	.nxs-nav {
		width: 100%;
		height: 5vh;
		position: fixed;
		top: 0;
		z-index: 5;
	}
</style>